<template>
  <div class="books">
    <banner :banner="banner"></banner>
		<card
			v-for="book in books"
			:key="book.isbn"
			:book="book"
		></card>
    <p class='text-footer' v-if='!isMore'>
      没有更多数据
    </p>
  </div>
</template>
<script>
import card from '@/components/card'
import banner from '../components/banner'
import { get } from '@/utils/api'

export default {
  name: 'books',
  data () {
    return {
      books: [],
      banner: [],
      isMore: true,
      queryData: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  components: {
    card,
    banner
  },
  onPullDownRefresh () {
    this.getBookList()
    this.getBanner()
  },
  onReachBottom () {
    if (!this.isMore) return false
    this.queryData.pageNum++
    this.getBookList()
  },
  methods: {
    async getBanner () {
      let {data: { banner }} = await get('/weapp/banner')
      this.banner = banner
    },
    async getBookList () {
      wx.showNavigationBarLoading()
      let booklist = await get('/weapp/booklist', this.queryData)
      if (booklist.code === 0) {
        if (booklist.data.isFirstPage) {
          this.books = booklist.data.books
        } else {
          this.books = [...this.books, ...booklist.data.books]
        }
        wx.stopPullDownRefresh()
        wx.hideNavigationBarLoading()
        this.isMore = !booklist.data.isLastPage
      }
    }
  },
  created () {
    // console.log('page index created', this)
  },
  mounted () {
    this.getBookList()
    this.getBanner()
  },
  onLoad () {
    // console.log('page index onLoad', this)
  },
  onReady () {
    // console.log('page index onReady', this)
  },
  onShow () {
    console.log('books onShow')
  },
  onUnload () {
    // console.log('onUnload', this)
  },
  onHide () {
    console.log('books onHide')
  }
}
</script>